<template>
  <div class="top-container">
      <banner :banner_list='banner_list'></banner>
      <layout>
          <div slot="left" class="left-product">
            <!-- 热门商品 -->
            <img src="../../../static/img/img_title_product.png" alt="">
            <product :product_list='product_list'></product>
            <div class="common-btn-box">
              <router-link class="common-btn" to=''>查看更多</router-link>
            </div>
          </div>
          <div slot="right" class="right-doctor">
              <!-- 推荐医生 -->
              <img src="../../../static/img/img_title_tuijian.png" alt="">
              <doctor :recommand_doctor_list='recommand_doctor_list'></doctor>
          </div>
      </layout>
      <first-adv></first-adv>
      <layout>
        <div slot="left">
          <!-- 分类 -->
          <category :getCategoryId="getCategoryId"></category>
          <!-- 日记 -->
          <diary :diary_list="diary_list"></diary>
          
        </div>
        <div slot="right">
          <!-- 达仁堂、圈子 -->
          <h4><span class="orange-border-bottom">达仁堂</span><button class="orange-color">换一换</button></h4>
          <hot-person :talent_list='talent_list'></hot-person>
          <h4><span class="orange-border-bottom">热门圈子</span><button class="orange-color more-tag">更多</button></h4>
          <hot-circle :hot_tag_list='hot_tag_list'></hot-circle>
        </div>
      </layout>
      <second-adv></second-adv>
      <div class="outer-container">
        <div>
          <img src="../../../static/img/img_ymt.png" alt="">
          <router-link class="orange-color more-tag" to=''>更多</router-link>
        </div>
        <beauty-article :product_list='product_list'></beauty-article>
        <img src="../../../static/img/img_title_hospital.png" alt="" class="hospital-title">
        <hospital></hospital>
        <div class="common-btn-box gray-top-border">
          <router-link to=''>查看更多</router-link>
        </div>
      </div>
      
  </div>
</template>
<script>
  import Banner from './Banner';
  import Layout from '@/components/Layout/index';
  import Product from '@/components/Product/index';
  import Doctor from '@/components/Doctor/index';
  import FirstAdv from './FirstAdv';
  import SecondAdv from './SecondAdv';
  import HotPerson from '@/components/HotPerson';
  import HotCircle from '@/components/Circle/index';
  import Category from './Category';
  import Diary from '@/components/Diary';
  import BeautyArticle from '@/components/BeautyArticle';
  import Hospital from '@/components/Hospital';

  export default{
    components:{
      Banner,
      Layout,
      Product,
      Doctor,
      FirstAdv,
      SecondAdv,
      HotPerson,
      HotCircle,
      Category,
      Diary,
      BeautyArticle,
      Hospital,
    },
    data(){
      return {
        product_list: [],
        banner_list: [],
        index_elite_category: [
          {diary_list:[]},
        ],
        diary_list:[],
        recommand_doctor_list:[],
        talent_list: [],
        hot_tag_list: [],
        category_id: '',
        // project_active: 
      }
    },
    created(){
      this.getAdsListByAlias();//获取轮播数据
      this.getHotGoodsList();//获取热门商品数据
      this.getIndexData();
    },
    methods:{
      getAdsListByAlias(){
        this.Server.getAdsListByAlias({
          ads_pos_alias: 'pcbanner'
        }).then((res)=>{
          res.data[0].selected = true;
          this.banner_list = res.data;
          // console.log(data,'d');
        })
      },
      getHotGoodsList(){
				this.Server.getHotGoodsList({
            
				}).then(res => {
          this.product_list = res.data.hot_proj_list;

				})
      },
      getIndexData(){
        this.Server.getIndexData().then((res)=>{
            this.talent_list = res.data.talent_list;
            this.recommand_doctor_list = res.data.recommand_doctor_list;
            this.index_elite_category = res.data.index_elite_category;
            this.getCategoryId(this.category_id);
            this.hot_tag_list = res.data.hot_tag_list;
        })
      },
      getCategoryId(id){
        var current_category = this.index_elite_category;
        for(let i=0;i<current_category.length;i++){
          if(current_category[i].category_id == id){
            this.diary_list = current_category[i].diary_list;
          }
        }
         
      }
    }
  }
</script>
<style lang='less' scoped>
  .left-product{
    img{
      width:200px;
      margin-bottom: 30px;
      margin-top: 70px;
    } 
  }
  .right-doctor{
    img{
      width: 100%;
      margin-bottom: 30px;
      margin-top: 70px;
    }
  }
  h4{
    margin-top: 50px;
    margin-bottom: 20px;
    line-height: 30px;
    span{
      display: inline-block;
      width: 20px;
      overflow: visible;
      white-space: nowrap;
    }
    i{
      display: inline-block;
    }
    button{
      float: right;
      // line-height: 30px;
      margin-top: 6px;
    }
  }
  .more-tag{
    float: right;
    padding-right: 10px;
    background: url(../../../static/img/icon_more.png) no-repeat;
    background-position: right bottom 
  }
  .hospital-title{
    width: 200px;
    margin: 50px 0 30px 0;
  }
  .common-btn-box{
    line-height: 40px;
  }
</style>